<script lang="ts">
	import { imageBasePath, variables } from '$store/g';
	import RetinaBgImage from '$lib/RetinaBgImage.svelte';
	import FreeExperienceLink from '$lib/link/FreeExperienceLink.svelte';
	import LearnMoreLink from '$lib/link/LearnMoreLink.svelte';
	import CustomerCaseLink from '$lib/CustomerCaseLink.svelte';

	interface Problem {
		text: string;
		icon: string;
		icon2x: string;
	}
	let problems: Problem[] = [
		{
			text: '获客成本大',
			icon: `home-get-customer.png`,
			icon2x: 'home-get-customer@2x.png'
		},
		{
			text: '社群不活跃',
			icon: 'home-community.png',
			icon2x: 'home-community@2x.png'
		},
		{
			text: '购买转化低',
			icon: 'home-purchase',
			icon2x: 'home-purchase@2x.png'
		},
		{
			text: '画像不清晰',
			icon: 'home-portrait.png',
			icon2x: 'home-portrait@2x.png'
		},
		{
			text: '员工无经验',
			icon: 'home-employee.png',
			icon2x: 'home-employee@2x.png'
		}
	];
</script>

<div class="mt-[62px]">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/douyin.png"
		img2xSrc="{$imageBasePath}/douyin@2x.png"
		alt="douyin"
		classes="flex flex-col min-w-0 m-0 w-full h-[560px] py-0 overflow-hidden bg-no-repeat bg-cover bg-bottom"
	>
		<div class="text-center text-[32px]">{$variables.siteName}，微信私域运营的工作台与连接器</div>
		<div class="text-center md:pt-6 text-2xl text-[#999999]">
			基于微信社群的新型客户关系解决方案，让你的品牌价值最大化
		</div>
	</RetinaBgImage>
</div>
<div>
	<div class="md:pt-16  text-center text-[32px]">您当前可能遇到的难题</div>
	<div class="grid grid-cols-5 pb-[88px]">
		{#each problems as problem}
			<div class="flex flex-col mx-auto w-[150px] justify-center">
				<RetinaBgImage
					imgSrc="{$imageBasePath}/{problem.icon}"
					img2xSrc="{$imageBasePath}/{problem.icon2x}"
					alt={problem.text}
					classes="w-[104px] h-[104px] bg-cover bg-center mx-auto"
				/>
				<div class="mt-8 text-center text-2xl">{problem.text}</div>
			</div>
		{/each}
	</div>
</div>
<div class="md:py-16  text-center text-[32px]">我们的解决方案</div>
<div class="grid grid-cols-2">
	<div class="grid grid-flow-col grid-rows-4 px-[120px]">
		<div class="h-[94px]"><div class="h-full w-[94px] bg-[#D8D8D8] rounded-full" /></div>
		<div class="py-6 text-[32px]">让你的社群活跃起来</div>
		<div class="text-[#666666] text-lg leading-[38px]">
			签到、抽奖、团购等多种简单好玩的活动,让社群运营高效自循环;粉丝、代言人、分销员多样的客户关系,可挖掘其销售贡献、社交传播、行为参与等多维价值,让品牌价值更大化.
		</div>
		<div class="py-8">
			<FreeExperienceLink href="void:(0)" />
			<LearnMoreLink href="void:(0)" />
		</div>
	</div>
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution.png"
		img2xSrc="{$imageBasePath}/solution@2x.png"
		alt="solution"
		classes="w-[621px] h-[460px] bg-no-repeat bg-cover bg-center"
	/>
</div>
<div class="w-full pl-[120px] py-[106px] grid grid-cols-2 bg-[#fcfcfc]">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution.png"
		img2xSrc="{$imageBasePath}/solution@2x.png"
		alt="solution"
		classes="pl-20 w-[621px] h-[460px] bg-no-repeat bg-cover bg-center !bg-[#cccccc]"
	/>
	<div class="grid grid-flow-col grid-rows-4 px-[120px]">
		<div class="h-[94px]"><div class="h-full w-[94px] bg-[#D8D8D8] rounded-full" /></div>
		<div class="py-6 text-[32px]">让你的生意高效经营</div>
		<div class="text-[#666666] text-lg leading-[38px]">
			自营、平台、经销商三种模式，选择更适合你的;微信、抖音、支付宝三端小程序,赋能你的生意;更有多种营销玩法,让品牌更圈粉,客户与你更亲近.
		</div>
		<div class="py-8">
			<FreeExperienceLink href="void:(0)" />
			<LearnMoreLink href="void:(0)" />
		</div>
	</div>
</div>
<div>
	<div class="md:pt-8 text-center text-[32px]">与品牌一起成长</div>
	<div class="h-[506px] py-[22px]">
		<CustomerCaseLink />
	</div>
</div>
